<template>
    <div style="padding-top:20px">
        <Row class="list-item" style="margin-top:-15px;">
            <i-col span="8">网关: {{ gateway }}</i-col>
            <i-col span="8" class="text-center red">离线: {{ gatewayOffline }}</i-col>
        </Row>

        <Row class="list-item">
            <i-col span="8">采集器: {{ elecollector }}</i-col>
            <i-col span="8" class="text-center red">离线: {{ elecollectorOffline }}</i-col>
        </Row>

        <Row class="list-item">
            <i-col span="8">水表网关: {{ watergateway }}</i-col>
            <i-col span="8" class="text-center red">离线: {{ watergatewayOffline }}</i-col>
        </Row>

        <Row class="list-item">
            <i-col span="8">门锁: {{ lock }}</i-col>
            <i-col span="8" class="text-center red">离线: {{ lockOffline }}</i-col>
            <i-col span="8" class="text-right red">低电: {{ lockLowPower }}</i-col>
        </Row>

        <Row class="list-item">
            <i-col span="8">电表: {{ elemeter }}</i-col>
            <i-col span="8" class="text-center red">离线: {{ elemeterOffline }}</i-col>
            <i-col span="8" class="text-right red">断电: {{ elemeterStop }}</i-col>
        </Row>

        <Row class="list-item">
            <i-col span="8">水表: {{ watermeter }}</i-col>
            <i-col span="8" class="text-center red">离线: {{ watermeterOffline }}</i-col>
            <!-- <i-col span="8" class="text-right red">断水: {{ watermeterStop }}</i-col> -->
        </Row>

        <Row class="list-item">
            <i-col span="8">门禁: {{ accessControl }}</i-col>
            <i-col span="8" class="text-center red">离线: {{ accessControlOffline }}</i-col>
        </Row>
    </div>
</template>

<script>
import { DeviceTypeEnum, NetState } from '@/libs/const'

export default {
  name: 'public-room-card',
  props: {
    room: Object
  },
  data () {
    return {
      gateway: 0,
      gatewayOffline: 0,

      elecollector: 0,
      elecollectorOffline: 0,

      watergateway: 0,
      watergatewayOffline: 0,

      lock: 0,
      lockOffline: 0,
      lockLowPower: 0,

      elemeter: 0,
      elemeterOffline: 0,
      elemeterStop: 0,

      watermeter: 0,
      watermeterOffline: 0,
      watermeterStop: 0,

      accessControl: 0,
      accessControlOffline: 0,

      currRoom: null
    }
  },

  mounted () {
    this.generateData()
  },
  methods: {
    generateData () {
      this.room.devices.forEach(item => {
        const { online, switch: switchStatus, low_power, device_type } = item
        const isOffline = online === NetState.OFFLINE
        switch (device_type) {
          case DeviceTypeEnum.GATEWAY:
            this.gateway++
            if (isOffline) this.gatewayOffline++
            break

          case DeviceTypeEnum.ELECOLLECTOR:
            this.elecollector++
            if (isOffline) this.elecollectorOffline++
            break

          case DeviceTypeEnum.WATERGATEWAY:
            this.watergateway++
            if (isOffline) this.watergatewayOffline++
            break

          case DeviceTypeEnum.LOCK:
            this.lock++
            if (isOffline) this.lockOffline++
            if (low_power) this.lockLowPower++
            break

          case DeviceTypeEnum.ELEMETER:
            this.elemeter++
            if (isOffline) this.elemeterOffline++
            if (switchStatus === 2) this.elemeterStop++
            break

          case DeviceTypeEnum.WATERMETER_COLD:
          case DeviceTypeEnum.WATERMETER_HOT:
            this.watermeter++
            if (isOffline) this.watermeterOffline++
            break
          case DeviceTypeEnum.FACE_ACCESS:
          case DeviceTypeEnum.ACCESS_CONTROL:
            this.accessControl += 1
            if (isOffline) this.accessControlOffline += 1
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.public-area2 {
    background: #fff !important;
    &-devices {
        display: flex;
        flex-flow: wrap;
    }
    &-device {
        width: 25%;
        text-align: center;
    }
}

.list-item {
    border-bottom: 1px dashed #ddd;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    text-align: left;
    margin: 0 20px;
}
.list-item:last-child {
    border-bottom: none;
}
.red {
    color: #ff4d4d;
}
.text-center {
    text-align: left;
    padding-left: 20px;
}
.text-right {
    text-align: left;
    padding-left: 30px;
}
</style>


